import styles from './index.less';
import { Flex, WhiteSpace, Icon, List } from 'antd-mobile';
import { connect } from 'dva';
import router from 'umi/router';
import { Component } from 'react';

const Item = Flex.Item;

class Wallet extends Component {
  handleMenuClick = menu => {
    router.push(`${menu.url}&title=${menu.text}`)
  }
  componentDidMount(){
    this.props.dispatch({
      type: 'wallet/getUserNiubiEff'
    })
  }
  render() {
    return (
      <div className={styles.container}>
        <Flex className={styles.header} direction="column">
          <div className={styles.headerTop}>
            <Icon
              className={styles.headerReturnIcon}
              type="left"
              color="#fff"
              onClick={() => {
                router.goBack();
              }}
            />
            {/* <span>养牛啦</span> */}
          </div>
          <Item className={styles.headerMain}>
            <span>可用牛币</span>
            <span>{this.props.wallet.niu_bi}</span>
          </Item>
          <Flex className={styles.headerBottom}>
            {this.props.wallet.headerMenuFirst.map((menu, index) => (
              <Flex direction="column" className={styles.headerBottomItem} key={index}>
                <span>{menu.name}</span>
                <span>{menu.data}</span>
              </Flex>
            ))}
          </Flex>
        </Flex>
        <Flex className={styles.secondMenu}>
          {this.props.wallet.headerMenuSecond.map((menu, index) => (
            <Flex direction="column" className={styles.secondMenuWrap} key={index}>
              <span className={styles.secondMenuName}>{menu.name}</span>
              <span className={styles.secondMenuData}>{menu.data}</span>
            </Flex>
          ))}
        </Flex>
        <WhiteSpace size="lg" />
        {/* <Flex className={styles.secondMenu}>
          {this.props.wallet.headerMenuThird.map((menu, index) => (
            <Flex direction="column" className={styles.secondMenuWrap} key={index}>
              <img className={styles.thirdMenuIcon} src={menu.iconSrc} />
              <span>{menu.text}</span>
            </Flex>
          ))}
        </Flex> */}
        <WhiteSpace size="lg" />
        {this.props.wallet.listData.map((list, listIndex) => (
          <List key={listIndex} onClick={this.handleMenuClick.bind(this, list)}>
            <List.Item thumb={list.iconSrc} arrow="horizontal">
              {list.text}
            </List.Item>
          </List>
        ))}
        <WhiteSpace size="lg" />
      </div>
    );
  }
}
export default connect(state => {
  return {
    wallet: state.wallet
  };
})(Wallet);
